<template>
  <div class="up-tabs-box">
    <div class="up-tabs-title-box">
      <div class="up-tabs-title-list" :ref="setRef">
        <div class="up-tabs-title" ref="TabsTitle" @touchstart="getTouchStart" :style="leftDistance" v-for="(item, index) in titleList" :key="index">
          <span :class="currentIndex === index ? 'active-title' : ''" class="up-tabs-title-text" @click="changeTabs(index, item.title, item.name)" >{{item.title}}</span>
        </div>
        <div class="up-tabs-line" :style="leftDistanceLine"></div>
      </div>
    </div>
    <div class="up-tabs-content" ref="UpTabsContent">
      <up-swipe :is-touch="isTouch" :is-tab="true" :show-indicators="false" :loop="false" :swipe-name="tabsName">
        <slot></slot>
      </up-swipe>
    </div>
  </div>
</template>

<script setup>
import { defineProps, nextTick, onBeforeUnmount, onMounted, ref, defineExpose } from 'vue'
import bus from '../utils/bus'
import UpSwipe from '../up-swipe/index.vue'
const props = defineProps({
  scroll: {
    type: Boolean,
    default: false
  },
  tabsName: {
    type: String,
    required: true,
    default: ''
  },
  isTouch: {
    type: Boolean,
    default: true
  }
})
const titleList = ref([])
const items = [
  {
    src: 'https://picsum.photos/800/600?random=1',
    alt: 'Image 1'
  },
  {
    src: 'https://picsum.photos/800/600?random=2',
    alt: 'Image 2'
  },
  {
    src: 'https://picsum.photos/800/600?random=3',
    alt: 'Image 3'
  },
  {
    src: 'https://picsum.photos/800/600?random=4',
    alt: 'Image 3'
  },
  {
    src: 'https://picsum.photos/800/600?random=5',
    alt: 'Image 3'
  }
]
const upTabsList = [
  {
    title: '我的世界'
  },
  {
    title: '神采飞扬'
  },
  {
    title: '一言九鼎'
  },
  {
    title: '何足挂齿'
  },
  {
    title: '津津有味'
  },
  {
    title: '栩栩如生'
  },
  {
    title: '天下无双'
  }
]
const TabsTitleList = ref(null)
const TabsTitle = ref(null)
const leftDistance = ref('')
const leftDistanceLine = ref('')
const UpTabsContent = ref(null)
const currentIndex = ref(0)
const startX = ref(0) // 滑动的元素的初始位置
const currentX = ref(0)
const distance = ref(0)
const totalWidth = ref(0)
const getTouchStart = (e) => {
  startX.value = e.touches[0].pageX
}
const setRef = (el) => {
  if (props.tabsName) {
    TabsTitleList.value = el
  }
}

const getTouchMove = (e) => {
  currentX.value = e.touches[0].pageX
  distance.value = currentX.value - startX.value
}

const changeTabs = (index, title, name) => {
  const tabBoxWidth = TabsTitleList.value.getBoundingClientRect().width / 2
  let distance1 = 0 // 相对于父盒子的距离
  if (TabsTitleList.value.children[index]) {
    distance1 = TabsTitleList.value.children[index].offsetLeft
  }
  // const distance = TabsTitleList.value.children[index].offsetLeft + TabsTitleList.value.children[index].offsetWidth / 2 // 子盒子到父盒子左边的距离
  currentIndex.value = index
  if (distance1 > tabBoxWidth) {
    let time = 100
    const timer = setInterval(() => {
      TabsTitleList.value.scrollLeft = TabsTitleList.value.children[index].offsetLeft - tabBoxWidth + TabsTitleList.value.children[index].getBoundingClientRect().width / 2 - TabsTitleList.value.getBoundingClientRect().left / 2
      time = time + 100
      if (time === 500) {
        clearInterval(timer)
      }
    }, 100)
    nextTick(() => {
      const distance = TabsTitleList.value.children[index].offsetLeft + TabsTitleList.value.children[index].offsetWidth / 2 // 子盒子到父盒子左边的距离
      leftDistanceLine.value = `transform: translateX(${distance}px) translateX(-50%)`
    })
  } else {
    if (!TabsTitleList.value.children[index]) {
      return
    }
    TabsTitleList.value.scrollLeft = distance1 - tabBoxWidth
    nextTick(() => {
      const distance = TabsTitleList.value.children[index].offsetLeft + TabsTitleList.value.children[index].offsetWidth / 2 // 子盒子到父盒子左边的距离
      leftDistanceLine.value = `transform: translateX(${distance}px) translateX(-50%)`
    })
  }

  if (title || name) {
    changeContent(index, title, name)
  }
}

const changeContent = (index, title, name) => {
  bus.emit('switchContent', {
    currentIndex: index,
    currentName: name,
    currentTitle: title,
    preName: props.tabsName
  })
}

const changeTabsLine = (index) => {
  // console.log('父距离左边', TabsTitleList.value.getBoundingClientRect().left)
  // console.log('父距离左边1', TabsTitleList.value.offsetLeft)
  // console.log('子距离左边', TabsTitleList.value.children[index].getBoundingClientRect().left)
  // console.log('子距离左边1', TabsTitleList.value.children[index].offsetLeft)
  // const distance1 = TabsTitleList.value.children[index].getBoundingClientRect().left // 相对于视角的距离
  const distance = TabsTitleList.value.children[index].offsetLeft + TabsTitleList.value.children[index].offsetWidth / 2 // 子盒子到父盒子左边的距离
  leftDistanceLine.value = `transform: translateX(${distance}px) translateX(-50%)`
}

const handleDom = () => {
  totalWidth.value = TabsTitleList.value.getBoundingClientRect().width
}

// 获取title
bus.on('getTabTitle', data => {
  if (data.preName === props.tabsName) {
    titleList.value.push(data)
  }
  return data
})

// 监听content的改变，切换title
bus.on('switchTitle', data => {
  // console.log('data.preName', data.preName)
  // console.log('props.tabsName', props.tabsName)
  if (data.preName === props.tabsName) {
    changeTabs(data.currentIndex)
  }
})

bus.emit('switchTabTitle', currentIndex.value)

onBeforeUnmount(() => {
  handleDom()
})

onMounted(() => {
  handleDom()
  changeTabs(0)
})

defineExpose({
  changeTabsLine,
  changeTabs
})
</script>

<style>
.up-tabs-box {
  font-size: 14px;
  background-color: #fff;
}
.up-tabs-title-box {
  position: relative;
  height: 44px;
  overflow: hidden;
  background-color: #fff;
}
.up-tabs-title-list {
  display: flex;
  position: relative;
  /* padding: 0 8px; */
  padding-bottom: 15px;
  box-sizing: content-box;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  user-select: none;
  background-color: #fff;
}
.active-title {
  color: #1989fa;
  font-size: 18px;
  font-weight: 600;
}
.up-tabs-title-list::-webkit-scrollbar {
  display: none;
}
.up-tabs-title {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 6px;
  color: #646566;
  font-size: 14px;
  line-height: 20px;
  /* cursor: pointer; */
  transition: 500ms;
  background-color: #fff;
}
.up-tabs-title-text {
  text-align: center;
  min-width: 90px;
  /* -webkit-box用于移动动设备自适应布局，实现横列的流体布局 */
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  /* 从顶部向底部垂直布置子元素 */
  -webkit-box-orient: vertical;
  background-color: #fff;
  font-size: 16px;
}
.up-tabs-line {
  position: absolute;
  bottom: 15px;
  left: 0;
  z-index: 1;
  width: 40px;
  height: 3px;
  /* background-color: #ee0a24; */
  background-color: #1989fa;
  border-radius: 3px;
  transition: 500ms;
}
.up-tabs-content {
  margin-top: 10px;
}
</style>
